/*
 * @Author: Siyongkun
 * @Date: 2021-07-23 14:56:39
 * @Last Modified by: Siyongkun
 * @Last Modified time: 2021-07-23 15:45:01
 */
import { Component } from 'react';
import style from './index.less';
import list from '../../../../mock/list.json';
import { Carousel, WingBlank } from 'antd-mobile';
import { history } from 'umi';
class Onehouse extends Component<any, any> {
  state: any = {
    list: [],
    data: ['1', '2'],
    imgHeight: 176,
    IconsList: [
      {
        imgs: 'https://webimg.ziroom.com/ac4eeb2d-3103-489d-af60-3a7c6e295090.png',
        title: '合租',
      },
      {
        imgs: 'https://webimg.ziroom.com/d372ba0a-5e0f-4688-a759-5bad59c05f1f.png',
        title: '整租',
      },
      {
        imgs: 'https://webimg.ziroom.com/32bc151f-2a6a-4c1b-8192-78b9dcb6b64b.png',
        title: '自如寓',
      },
      {
        imgs: 'https://webimg.ziroom.com/22ec3323-f4a4-436d-9671-4530089f0be0.png',
        title: '豪宅',
      },
      {
        imgs: 'https://webimg.ziroom.com/56b0e3f1-dca4-4e11-b0ef-ef8841073511.png',
        title: '搬家',
      },
      {
        imgs: 'https://webimg.ziroom.com/0f183ba0-a1a6-47fe-b313-c6122bb8e928.png',
        title: '保洁',
      },
      {
        imgs: 'https://webimg.ziroom.com/6c8bed62-f492-40d1-8c5f-d78f8413f5f5.png',
        title: '家修',
      },
      {
        imgs: 'https://webimg.ziroom.com/38935d06-0370-4a0a-a951-1e6d1ace7322.png',
        title: '优品',
      },
    ],
  };
  componentDidMount() {
    this.setState({ list: list });
    setTimeout(() => {
      this.setState({
        data: [
          'https://webimg.ziroom.com/ad38b741-28d0-4e49-aa99-125990ea1c93.jpg',
          'https://webimg.ziroom.com/9895ca17-6d57-4aca-bb32-1ca3bebc5770.jpg',
        ],
      });
    }, 100);
  }
  detail(item: any) {
    history.push('/detail', item);
  }
  render() {
    const { list, IconsList } = this.state;
    return (
      <div className={style.context_box}>
        <div className={style.context_img}></div>
        <div className={style.main}>
          <div className={style.main_header}></div>
          <div className={style.oprationbar_wrapper}>
            <div className={style.oprationbar_icons}>
              {IconsList.map((item: any, index: number) => {
                return (
                  <a className={style.icon_a} key={index}>
                    <img className={style.icon_a_img} src={item.imgs} alt="" />
                    <h2 className={style.icon_a_h2}>{item.title}</h2>
                  </a>
                );
              })}
            </div>
            <div className={style.special_views}>
              <div className={style.views_imgs}>
                <img
                  src="https://webimg.ziroom.com/480eb779-5c6f-4ed7-97e2-1c5a55bc14a7.png"
                  alt=""
                />
              </div>
              <div className={style.views_imgs}>
                <img
                  src="https://webimg.ziroom.com/f103232a-e447-429a-807f-3f0641b64d1c.png"
                  alt=""
                />
              </div>
              <div className={style.views_imgs}>
                <img
                  src="https://webimg.ziroom.com/91989abe-789c-4219-b13c-360bb51693b3.png"
                  alt=""
                />
              </div>
            </div>
            <div>
              <WingBlank className={style.wrapper_img}>
                <Carousel
                  className={style.space_carousel}
                  frameOverflow="visible"
                  cellSpacing={10}
                  slideWidth={0.8}
                  autoplay
                  infinite
                  beforeChange={(from, to) => {
                    return;
                  }}
                  afterChange={(index) => this.setState({ slideIndex: index })}
                >
                  {this.state.data.map((val: any, index: any) => (
                    <a
                      key={val}
                      href="http://www.alipay.com"
                      style={{
                        display: 'block',
                        position: 'relative',
                        background: '#fff !important',
                        top: this.state.slideIndex === index ? -10 : 0,
                        height: this.state.imgHeight,
                        boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                      }}
                    >
                      <img
                        src={val}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                          // fire window resize event to change height
                          window.dispatchEvent(new Event('resize'));
                          this.setState({ imgHeight: 'auto' });
                        }}
                      />
                    </a>
                  ))}
                </Carousel>
              </WingBlank>
            </div>
          </div>
        </div>
        <div className={style.context_list}>
          {list &&
            list.map((item: any, index: any) => {
              return (
                <div
                  onClick={() => {
                    this.detail(item);
                  }}
                  className={style.context_wrapper}
                  key={index}
                >
                  <div className={style.context_list_img}>
                    <img src={item.img} alt="" />
                  </div>
                  <div>
                    <a href={item.href}>{item.name}</a>
                    <h6>{item.other}</h6>
                    <i>{item.price}</i>
                    <div>{item.unit_price}</div>
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}
export default Onehouse;
